<template>
	<div class="home-container layout-pd">
		<div class="title">
			<svg
				t="1741695185117"
				class="icon"
				viewBox="0 0 1024 1024"
				version="1.1"
				xmlns="http://www.w3.org/2000/svg"
				p-id="9354"
				width="128"
				height="128"
			>
				<path
					d="M177.152 665.088c-10.24 0-16.896-8.192-16.896-16.896 0-10.24 8.192-16.896 16.896-16.896h79.872c10.24 0 16.896 8.192 16.896 16.896 0 10.24-8.192 16.896-16.896 16.896H177.152z m0-53.76c-10.24 0-16.896-8.192-16.896-16.896 0-10.24 8.192-16.896 16.896-16.896h79.872c10.24 0 16.896 8.192 16.896 16.896 0 10.24-8.192 16.896-16.896 16.896H177.152z m335.36-39.936c-48.128 0-88.576-39.936-88.576-88.576 0-48.128 39.936-88.576 88.576-88.576 48.128 0 88.576 39.936 88.576 88.576s-40.448 88.576-88.576 88.576z m0-136.704c-25.088 0-46.592 21.504-46.592 46.592 0 25.088 21.504 46.592 46.592 46.592 25.088 0 46.592-21.504 46.592-46.592 0-25.088-21.504-46.592-46.592-46.592zM177.152 558.08c-10.24 0-16.896-8.192-16.896-16.896 0-10.24 8.192-16.896 16.896-16.896h79.872c10.24 0 16.896 8.192 16.896 16.896 0 10.24-8.192 16.896-16.896 16.896H177.152z m588.8 107.008c-10.24 0-16.896-8.192-16.896-16.896 0-10.24 8.192-16.896 16.896-16.896h79.872c10.24 0 16.896 8.192 16.896 16.896 0 10.24-8.192 16.896-16.896 16.896h-79.872z m0-53.76c-10.24 0-16.896-8.192-16.896-16.896 0-10.24 8.192-16.896 16.896-16.896h79.872c10.24 0 16.896 8.192 16.896 16.896 0 10.24-8.192 16.896-16.896 16.896h-79.872z m0-53.248c-10.24 0-16.896-8.192-16.896-16.896 0-10.24 8.192-16.896 16.896-16.896h79.872c10.24 0 16.896 8.192 16.896 16.896 0 10.24-8.192 16.896-16.896 16.896h-79.872z m0 0"
					fill="#88CCFF"
					p-id="9355"
				></path>
				<path
					d="M944.64 855.552h-11.776V441.344c0-12.8-10.24-23.04-23.04-23.04h-180.224V357.888c0-7.68-4.608-15.872-11.264-18.944l-1.024-0.512-188.416-116.224v-29.184h112.128c8.704 0 17.92-6.656 17.92-17.92V104.448c0-8.704-6.656-17.92-17.92-17.92h-112.128v-13.824c0-9.728-7.68-17.92-16.384-17.92-9.728 0-17.92 7.68-17.92 16.384v147.456L306.176 334.848c-4.096 3.072-11.776 9.216-11.776 19.456V414.72H117.248c-12.8 0-23.04 10.24-23.04 23.04V855.04h-13.824c-12.8 0-24.576 12.288-24.576 24.576s10.24 23.04 23.04 23.04h99.84c12.8 0 23.04-10.24 23.04-23.04s-10.24-23.04-23.04-23.04h-38.4V504.832c0-22.016 17.92-40.448 40.448-40.448h76.8c22.016 0 40.448 17.92 40.448 40.448v438.784c0 6.144 2.56 12.8 6.144 15.36l1.024 1.024c4.608 4.608 10.24 7.168 15.872 7.168h123.392c14.336 0 24.576-10.24 24.576-24.576v-230.4c0-14.848 12.288-27.136 27.136-27.136h33.28c14.848 0 27.136 12.288 27.136 27.136v225.28c0 17.408 13.824 31.232 31.232 31.232h118.272c12.8 0 23.04-10.24 23.04-23.04V507.904c0-24.064 19.456-43.52 43.52-43.52h68.608c24.064 0 43.52 19.456 43.52 43.52V855.04h-40.448c-12.8 0-23.04 10.24-23.04 23.04s10.24 23.04 23.04 23.04h99.84c12.8 0 23.04-10.24 23.04-23.04v-1.024c0.512-4.608-1.536-9.728-5.12-13.824-4.608-4.608-11.264-7.68-17.408-7.68zM530.432 112.64h95.744v55.296h-95.744V112.64z m151.04 769.024c0 20.992-18.432 38.4-40.448 38.4-22.016 0-40.448-17.92-40.448-40.448v-208.384c0-12.8-10.24-23.04-23.04-23.04H447.488c-12.8 0-23.04 10.24-23.04 23.04v208.384c0 22.016-17.92 40.448-40.448 40.448s-40.448-17.92-40.448-40.448V406.528c0-21.504 11.776-43.008 29.696-55.296l105.472-65.024c19.968-11.776 47.616-11.776 67.584 0L651.776 353.28c18.944 11.264 29.696 31.232 29.696 55.296v473.088z"
					fill="#1144FB"
					p-id="9356"
				></path>
			</svg>
			<div class="content">
				<h2>{{ state.title.name }}</h2>
				<p class="desp">{{ state.title.desp }}</p>
				<div class="tags">
					<span v-for="(tag, index) in state.title.tags" :key="index" class="tag">
						{{ tag }}
					</span>
				</div>
				<p class="time">{{ state.title.time }}</p>
			</div>
		</div>

		<!-- 筛选器 -->
		<div class="filter-container">
			<div class="select_word">按难度筛选：</div>
			<el-select v-model="selectedDifficulty" placeholder="按难度筛选" clearable style="margin-right: 20px; width: 150px;">
				<el-option label="全部" value="" />
				<el-option label="简单" value="简单" />
				<el-option label="中等" value="中等" />
				<el-option label="困难" value="困难" />
			</el-select>

			<div class="select_word">按标签筛选：</div>
			<el-select v-model="selectedTag" placeholder="按标签筛选" clearable style="width: 150px">
				<el-option label="全部" value="" />
				<el-option v-for="tag in allTags" :key="tag" :label="tag" :value="tag" />
			</el-select>
		</div>

		<!-- 展示 content 内容 -->
		<div class="content-list">
			<div v-for="(item, index) in filteredContent" :key="index" class="content-item" @click="toAnswer">
				<h3>{{ item.name }}</h3>
				<p class="difficult">难度: {{ item.difficult }}</p>
				<div class="tags">
					<span v-for="(tag, tagIndex) in item.tags" :key="tagIndex" class="tag" :class="{ 'vip-tag': tag === 'VIP' }">
						{{ tag }}
					</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="home">
import { reactive, onMounted, watch, onActivated, ref, computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import { useRouter } from 'vue-router';
// 获取路由实例
const router = useRouter();
// const handleClick = (tab, event) => {
// 	// eslint-disable-next-line no-console
// 	//console.log(tab, event);
// };
const storesTagsViewRoutes = useTagsViewRoutes();
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
const state = reactive({
	title: {
		name: 'java刷题路线',
		desp: '扎实计算机网络、操作系统基础、Java基础、深入理解Java集合与并发、掌握Java虚拟机原理，以及熟悉常用的数据库（MySQL）和缓存（Redis）技术',
		tags: ['Java', 'Java刷题路线'],
		time: '2022/2/3',
	},
	content: [
		{
			name: '说说 Java 中 HashMap 的原理？',
			difficult: '中等',
			tags: ['VIP', 'Java', 'Java基础'],
		},
		{
			name: 'Java 中 ConcurrentHashMap 1.7 和 1.8 之间有哪些区别？',
			difficult: '中等',
			tags: ['Java集合', 'Java'],
		},
		{
			name: 'Java 中有哪些集合类？请简单介绍',
			difficult: '简单',
			tags: ['Java集合', 'Java'],
		},
		{
			name: 'Java 中有哪些集合类？请简单介绍',
			difficult: '简单',
			tags: ['Java集合', 'Java'],
		},
	],
});
const selectedDifficulty = ref('');
const selectedTag = ref('');

// 获取所有标签
const allTags = computed(() => {
	const tags = new Set();
	state.content.forEach((item) => {
		item.tags.forEach((tag) => tags.add(tag));
	});
	return Array.from(tags);
});

// 根据筛选条件过滤内容
const filteredContent = computed(() => {
	return state.content.filter((item) => {
		const matchesDifficulty = selectedDifficulty.value ? item.difficult === selectedDifficulty.value : true;
		const matchesTag = selectedTag.value ? item.tags.includes(selectedTag.value) : true;
		return matchesDifficulty && matchesTag;
	});
});

const toAnswer = () => {
	router.push('/answer');
};

// 页面加载时
onMounted(() => {});
// 由于页面缓存原因，keep-alive
onActivated(() => {});
// 监听 pinia 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
watch(
	() => isTagsViewCurrenFull.value,
	() => {}
);
</script>

<style scoped lang="scss">
$homeNavLengh: 8;
.home-container {
	display: flex;
	flex-direction: column;
	height: 85vh; /* 容器占满整个视口高度 */
	overflow: hidden; /* 禁止页面滚动 */
	.title {
		display: flex;
		align-items: center;
		gap: 20px;
		padding: 20px;
		background-color: #f9f9f9;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.icon {
		flex-shrink: 0; /* 防止图标被压缩 */
	}

	.content {
		flex: 1;
	}

	h2 {
		margin: 0 0 10px;
		font-size: 24px;
		color: #333;
	}

	.desp {
		margin: 0 0 10px;
		font-size: 14px;
		color: #666;
		line-height: 1.5;
	}

	.tags {
		display: flex;
		gap: 8px;
		margin-bottom: 10px;
	}

	.tag {
		padding: 4px 8px;
		background-color: #e0f7fa;
		border-radius: 4px;
		font-size: 12px;
		color: #00796b;
	}

	.time {
		margin: 0;
		font-size: 12px;
		color: #999;
	}
	.filter-container {
		display: flex;
		flex-direction: row;
		margin: 20px;
		align-items: center; /* 垂直居中 */
		gap: 20px; /* 设置间距 */
		margin-bottom: 10px;
	}

	.filter-container label {
		margin-right: 10px;
	}

	.filter-container select {
		padding: 5px;
		margin-right: 20px;
	}

	.content-list {
		margin-top: 20px;
		overflow-y: auto;
		height: 65%;
	}

	.content-item {
		margin-bottom: 20px;
		padding: 15px;
		border: 1px solid #ddd;
		border-radius: 4px;
	}

	.content-item h3 {
		margin: 0;
		font-size: 18px;
	}

	.content-item .difficult {
		margin: 10px 0;
		color: #666;
	}

	.content-item .tags .tag {
		display: inline-block;
		padding: 5px 10px;
		margin-right: 10px;
		background-color: #f0f0f0;
		border-radius: 4px;
		font-size: 14px;
	}

	.content-item .tags .vip-tag {
		background-color: #ffcc00; /* VIP 标签的特殊背景色 */
	}
}
</style>
